<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Chat IO</title>
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
  <a href="https://github.com/OmarElGabry/chat.io" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
    <div class="login-page">
      <div class="form">
        <div style="background-color: gainsboro;margin-bottom: 10px;">
          👋 Check out other cool stuff 
          <a href="https://github.com/OmarElGabry/gunaydin" target="_blank" style="background-color: dodgerblue;">Gunaydin</a>
        </div>
        <div class="social-buttons">
          <div><span>Login</span> via</div>
          <a href="/auth/facebook">
            <img class="loginBtn" src="img/facebookLoginBtn.png" alt="Sign-In with Facebook">
          </a>

          <a href="/auth/twitter">
            <img class="loginBtn" src="img/twitterLoginBtn.png" alt="Sign-In with Twitter">
          </a>
        </div>

        <div class="form-line"></div>

        <div style="margin-top: 18px;">
            <form action="/register" class="register-form" method="post" >
              <input type="text" name="username" placeholder="username"/>
              <input type="password" name="password" placeholder="password"/>
              <button type="submit">create</button>
              <p class="message">Already registered? <a href="#">Sign In</a></p>
              <% if (errors != null && showRegisterForm != null && showRegisterForm === true) { %>
                <% errors.forEach(function(err){ %>
                  <p class="message error"><%= err %></p>
                <% }); %>
              <% } %>
            </form>
            <form action="/login" class="login-form" method="post">
              <input type="text" name="username" placeholder="username"/>
              <input type="password" name="password" placeholder="password"/>
              <button type="submit">login</button>
              <p class="message">Not registered? <a href="#">Create an account</a></p>
              <% if (errors != null && showRegisterForm == null) { %>
                <% errors.forEach(function(err){ %>
                  <p class="message error"><%= err %></p>
                <% }); %>
              <% } if (success != null && showRegisterForm == null) { %>
                <p class="message success"><%= success %></p>
              <% } %>
            </form>
        </div>
    </div> <!-- end form -->
    </div> <!-- end login container -->
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <% if(showRegisterForm != null && showRegisterForm === true) { %>
        <script>
          $('.register-form').show(); $('.login-form, .social-buttons, .form-line').hide();
        </script>
    <% } %>
    <script>
        $('.message a').click(function(){
            $('form, .social-buttons, .form-line').animate({height: "toggle", opacity: "toggle"}, "slow");
          });
    </script>
  </body>
</html>
